<template>
    <div clas="nav">
        <van-swipe class="my-swipe">
            <van-swipe-item v-for="(item, index) in Math.ceil(navList.length / 5)">
                <van-grid :column-num="5" :border="false">
                    <van-grid-item :icon="subitem.icon" :text="subitem.title"
                        v-for="subitem in navList.slice(5 * index, 5 * (index + 1))" />
                </van-grid>
            </van-swipe-item>
            <!-- active代表当前轮播的下标（0,1）  total代表的是轮播的总次数 -->
            <template #indicator="{ active, total }">
                <div class="custom-indicator">
                    <span v-for="(item, index) in total" :class="index == active ? 'active' : ''"
                        :style="{ width: 100 / total + '%' }"></span>
                </div>
            </template>
        </van-swipe>

    </div>
</template>

<script>
export default {
    props: ['navList']
}
</script>

<style scoped lang="less">
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 12px;
    width: 20px;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    span {
        height: 8px;
    }
    span.active {
        background: red;
    }
}
</style>